<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>贪吃蛇</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.left {
			float: left;
		}

		.right {
			float: right;
		}

		.clear-fixed:after {
			content: "";
			display: table;
			clear: both;
		}

		.container {
			width: 800px;
			height: 550px;
			position: absolute;
			top: 20px;
			left: 50%;
			margin-left: -400px;
		}

		.container .header {
			width: 100%;
			height: 50px;
			font-size: 25px;
		}

		.container .header .score-panel {
			height: 50px;
			text-align: center;
			line-height: 50px;
		}

		#canvas {
			width: 800px;
			height: 500px;
			background-color: #ffffff;
			border-radius: 5px;
			border: 1px solid orange;
		}

		#game-over,
		#game-pause {
			display: none;
			position: absolute;
			left: 50%;
			top: 23px;
			width: 800px;
			height: 500px;
			border-radius: 5px;
			background-color: rgba(0, 0, 0, .6);
			margin-left: -399px;
			text-align: center;
			z-index: 5;
		}

		#game-over .panel,
		#game-pause .panel {
			position: absolute;
			left: 50%;
			right: 50%;
			top: 140px;
			width: 220px;
			height: 200px;
			border-radius: 10px;
			background-color: white;
			margin-left: -110px;
			text-align: center;
			z-index: 6;
		}

		#again,
		#continue {
			display: inline-block;
			width: 170px;
			height: 50px;
			border-radius: 10px;
			text-decoration: none;
			background-color: #9F8D77;
			color: white;
			font-size: 36px;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="score-panel left">
			<span>SCORE: </span>
			<span id="score">0</span>
		</div>
		<canvas id="canvas" width="800" height="500"></canvas>
		<div id="game-over">
			<div class="panel">
				<h1 id="state" style="margin-top: 5px;"></h1>
				<a href="javascript:;" id="again">Try again</a>
			</div>
		</div>
		<div id="game-pause">
			<div class="panel">
				<h1 id="state" style="margin: 35px 0;color:orange;">PAUSED</h1>
				<a href="javascript:;" id="continue">Continue</a>
			</div>
		</div>
		<div>TIP: 通过键盘↑ ↓ ← → 键操作蛇移动，space键切换暂停</div>
	</div>
</body>
<script src="./js/util.js"></script>
<script src="./js/food.js"></script>
<script src="./js/snake.js"></script>
<script src="./js/game.js"></script>

</html>